在上一篇有提到,可以使用花括號({{ }}
)綁定值,這個有正式的名稱,稱為插值法(Interpolation)
花括號裡面寫的屬性,Angular會搜尋對應的內容並且替換
例如:
main.component.html
<p>
我的名字是 {{name}}
</p>
Angular將會尋找稱為name的屬性,並且將值替換上去
main.component.ts
name = 'jason'
因此最後會顯示為:
我的名字是 jason
插值法不僅能顯示文字的內容,也能使用在顯示圖片
<div><img src="{{itemImageUrl}}"></div>
這樣圖片的路徑就會隨著屬性itemImageUrl的不同跟著變動。
可以做簡單的數學運算:
<p>1 + 1 的答案是 {{1 + 1}}</p> // 2
<p>今天是 {{getWeekDay('六')}}</p> //今天是星期六
getWeekDay(weekDay){
return `星期 ${weekDay}`
}
<p>今天是 {{goodDay? '晴天':'雨天'}}</p> // 晴天
goodDay = true
假設現在有一筆陣列的資料
heros = [
{ name: '兩斤勘吉', age: 35 },
{ name: '秋本麗子', age: 25 },
{ name: '野比大雄', age: 12 },
{ name: '江戶川柯南', age: 8 }
];
這時候就可以使用ngFor來顯示英雄的名字與年紀
<h1>
使用ngFor顯示陣列內容
</h1>
<div *ngFor="let hero of heros">
<div>
名字: {{hero.name}}
</div>
<div>
年齡: {{hero.age}}
</div>
===========
</div>
顯示出來的內容:
ngIf可以依照條件顯示或隱藏內容
再繼續剛剛的例子,假如被抗議不能顯示未成年的英雄的姓名及年齡,那麼就必須使用條件將未滿18歲的英雄隱藏起來,這時候就可以使用ngIf去做判斷
如果here.age大於18,結果為true就會顯示,反之,hero.age小於18,結果為false,就會移除不顯示
<h1>
使用ngFor顯示陣列內容
</h1>
<div *ngFor="let hero of heros">
<div *ngIf="hero.age > 18">
名字: {{hero.name}}
</div>
<div *ngIf="hero.age > 18">
年齡: {{hero.age}}
</div>
===========
</div>
顯示出來的內容:
未滿18歲的大雄與柯南就被移除了
ngFor
處理多筆資料ngIf
處理資料顯示的條件